<!-- 各种图形绘制 -->
<template>
  <div id="container"></div>
</template>

<script>
import { Chart } from '@antv/g2'
import { DataSet } from '@antv/data-set'
export default {
  name: 'antvG2',
  data () {
    return {
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init: function () {
      /**
       * https://g2.antv.vision/zh/examples/data/xxxxxx.json
       * 1、世界：world.geo.json
       * 2、中国：china-provinces.geo.json
       * 3、美国：usa.geo.json
       *
      */
      fetch('https://g2.antv.vision/zh/examples/data/china-provinces.geo.json')
      // fetch('https://g2.antv.vision/zh/examples/data/world.geo.json')
      .then(res => res.json())
      .then(GeoJSON => {
        const userData = [];
        const geoDv = new DataSet.View().source(GeoJSON, {
              type: 'GeoJSON'
            }).transform({
              type: 'map',
              callback(row) {
                userData.push({
                  longitude: row.centroidX,
                  latitude: row.centroidY,
                  name: row.name,
                  value: Math.random() * (1000 - 1)
                });
                return row;
              }
            });

            const chart = new Chart({
              container: 'container',
              autoFit: true,
              height: 500,
              padding: 0
            });
            chart.scale({
              latitude: { sync: true },
              longitude: { sync: true }
            });
            chart.legend(false);
            chart.axis(false);
            chart.tooltip(false);

            const geoView = chart.createView();
            geoView.data(geoDv.rows);
            geoView.polygon()
              .position('longitude*latitude')
              .color('grey')
              .label('name', {
                offset: 0
              });

            const userView = chart.createView();
            userView.data(userData);
            userView.heatmap()
              .position('longitude*latitude')
              // .color('value', '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2')
              .color('value', 'red-blue-green-pink-yellow-#000-#fff-purple-#eee')
              .size(500 / 20)
              .style({
                blur: 500 / 15
              });
            chart.render();
      })

    }
  }
}
</script>
<style scoped>
div{
  margin: 0 auto 50px;
}
</style>
